import React, {Component} from 'react';
import {connect} from 'react-redux'
import {CSSTransition} from "react-transition-group";
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    InfoItem,
    SearchWrapper,
    SearchM,
    Mtitle,
    Msw
} from "./style";
import {action} from './store'

class Header extends Component {
    getList(show) {
        const {page, handleS, handleM, MouseIn} = this.props
        if (show || MouseIn) {
            return (
                <SearchM onMouseEnter={handleM} onMouseLeave={handleM}>
                    <Mtitle>
                        热门搜索
                        <Msw onClick={handleS}>
                            <i ref={(icon)=>{this.sic = icon}} className='iconfont spin'>&#xe87d;</i>
                            换一批</Msw>
                    </Mtitle>
                    <div>
                        {this.props.list.filter((item, ind) => {
                            return ind >= (page - 1) * 4 && ind < page * 4
                        }).map(item => {
                            return (<InfoItem key={item}>{item}</InfoItem>)
                        })}
                    </div>
                </SearchM>
            )
        } else {
            return ''
        }
    }

    render() {
        const {focus, handleFocus, handleBlur,list} = this.props;
        console.log(list)
        return (
            <>
                <HeaderWrapper>
                    <Logo/>
                    <Nav>
                        <NavItem className='left active'>首页</NavItem>
                        <NavItem className='left'>下载App</NavItem>
                        <NavItem className='right'>登陆</NavItem>
                        <NavItem className='right'>
                            <i className='iconfont'>&#xe636;</i>
                        </NavItem>
                        <SearchWrapper>
                            <CSSTransition
                                in={focus}
                                timeout={200}
                                classNames='slide'
                            >
                                <NavSearch className={focus ? 'focus' : ''}
                                           onBlur={handleBlur}
                                           onFocus={handleFocus}
                                ></NavSearch>
                            </CSSTransition>
                            <i className={focus ? 'focus iconfont zoom' : 'iconfont zoom'}>&#xe63d;</i>
                            {this.getList(focus)}
                        </SearchWrapper>
                    </Nav>
                    <Addition>
                        <Button className='writing'>
                            <i className='iconfont'>&#xe645;</i>
                            写文章</Button>
                        <Button className='reg'>注册</Button>
                    </Addition>
                </HeaderWrapper>
            </>
        );
    }
}


const sp = (state) => {
    return {
        // immutable类型的数据不能直接 点调用
        // state.getIn(['header','focus']) same
        focus: state.get('header').get('focus'),
        page: state.get('header').get('page'),
        list: state.getIn(['header', 'list']),
        MouseIn: state.get('header').get('MouseIn')
    }
}
const dp = (disp) => {
    return {
        handleFocus(s) {
            console.log(s)
            disp(action.getL())
            disp(action.Focus())
        },
        handleBlur() {
            disp(action.Focus())
        },
        handleS() {
            console.log()
            disp(action.Ss())
        },
        handleM() {
            disp({type: 'mouse'})
        }
    }
}

export default connect(sp, dp)(Header);
